import { createApp } from 'vue';

// components
import { VAceEditor } from 'vue3-ace-editor';
import 'ace-builds/src-min-noconflict/ext-language_tools';
import 'ace-builds/src-min-noconflict/mode-pgsql';
import 'ace-builds/src-min-noconflict/theme-chrome';
import 'ace-builds/src-min-noconflict/theme-merbivore_soft';

// plugins

// ElementPlus
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
// Vue MarkdownEditor
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github';
import '@kangc/v-md-editor/lib/theme/style/github.css';

import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';
import createHighlightLinesPlugin from '@kangc/v-md-editor/lib/plugins/highlight-lines/index';
import '@kangc/v-md-editor/lib/plugins/highlight-lines/highlight-lines.css';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';
// highlightjs
import hljs from 'highlight.js/lib/core';
import sql from 'highlight.js/lib/languages/sql';

// app
import App from './App.vue';
import store from './store';

// init
hljs.registerLanguage('sql', sql);
VMdPreview.use(githubTheme, { Hljs: hljs })
  .use(createHighlightLinesPlugin()) // 高亮代码行
  .use(createLineNumbertPlugin()) // 显示行号
  .use(createCopyCodePlugin()); // 代码快速复制

createApp(App)
  .component('VAceEditor', VAceEditor)
  .use(ElementPlus)
  .use(VMdPreview)
  .use(store)
  .mount('#app');
